@font-face {
    font-family: 'Futura MD';
    src: url('Futura Bold Italic font.ttf') format('truetype'); /* Oldest Browsers */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FuturaBf';
    src: url('Futura Book font.ttf') format('truetype'); /* Oldest Browsers */
    font-weight: normal;
    font-style: normal;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%-50px;
}

body {
    background-color: #f1f1f1;
    color: #0f0c0c;
    font-family: 'FuturaBf', Arial, sans-serif;
    text-align: center;
    padding-bottom: 50px;
}

.LogoHeader {
    display: flex;
    justify-content: flex-end; /* Aligns content to the right */
    align-items: center;       /* Centers content vertically */
    height: 80px;             /* Adjust the height as needed */
    background-color: #f1f1f1; /* Optional: Background color */
    padding: 10px;             /* Optional: Padding around the content */
}

.LogoHeader img {
    max-height: 100%;          /* Ensure the logo fits in the header */
    width: auto;               /* Maintain the aspect ratio of the logo */
}

.profile-photo {
    border-radius: 50%;      /* Macht das Bild rund */
    border: 8px solid #38539e;  /* 1px Rand, Farbe nach Bedarf ändern */
    object-fit: cover;       /* Stellt sicher, dass das Bild den Bereich ohne Verzerrung abdeckt */
    width: 250px;            /* Breite nach Bedarf anpassen */
    height: 250px;           /* Höhe nach Bedarf anpassen, sollte für einen perfekten Kreis gleich der Breite sein */
    box-shadow: 0px 8px 8px rgba(53, 45, 45, 0.5);

}

.kontakt-container {
    margin: 0 auto;
    padding: 20px;
    max-width: 400px;
}

.kontakt-container h1 {
    margin-bottom: 0; /* Removes the bottom margin from the h1 element */
    font-family: 'Futura MD', Arial, sans-serif;
}

.kontakt-container h4 {
    margin-top: 0; /* Removes the top margin from the h4 element */
    margin-bottom: 10px;
    font-family: 'Futura MD', Arial, sans-serif;
}

h4 {
    color: #38539e;
}

.balken {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
}

.rechteck {
    flex: 1;
    position: relative; /* Erlaubt die Positionierung der Symbole relativ zum Rechteck */
    text-align: center; /* Zentriert den Inhalt */
    text-decoration: none; /* Entfernt die Standard-Link-Formatierung */
}

.eck-symbol {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35px;  /* Oder eine andere feste Breite */
    height:35px; /* Die Höhe sollte gleich der Breite sein, um Verzerrungen zu vermeiden */
    object-fit: contain; /* Sorgt für proportionale Skalierung */
}


.kontakt-tabelle {
    border-collapse: separate;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

.kontakt-tabelle td {
    border: none;
    padding: 5px; /* Reduzieren Sie diesen Wert, um die Zellen enger zu machen */
    text-align: Left;
}

.kontakt-tabelle td:first-child {
    width: 30%; /* Oder einen kleineren Wert, falls gewünscht */
}

.download-button {
    display: inline-block;
    padding: 10px 15px; /* Anpassbare Größe */
    margin: 25px 0; /* Abstand oben und unten */
    background-color: #38539e; /* Blaue Hintergrundfarbe */
    color: white; /* Weiße Textfarbe */
    text-decoration: none; /* Entfernt die Unterstreichung */
    border-radius: 5px; /* Abgerundete Ecken */
    font-family: Arial, sans-serif; /* Schriftart */
    font-size: 16px; /* Schriftgröße */
    transition: background-color 0.3s; /* Weicher Übergang für Hover-Effekt */
}

.download-button:hover {
    background-color: #0056b3; /* Dunklere Hintergrundfarbe beim Überfahren mit der Maus */
}

a {
    color: inherit; /* Setzt die Farbe auf die des umgebenden Textes */
    text-decoration: none; /* Entfernt die Unterstreichung */
    background-color: transparent; /* Stellt sicher, dass kein Hintergrund angewendet wird */
    font-family: inherit; /* Übernimmt die Schriftart des umgebenden Textes */
}

a:hover, a:active, a:visited, a:focus {
    color: inherit; /* Beibehalten der Farbe auch im Hover-, Active-, Visited- und Focus-Zustand */
    text-decoration: none; /* Entfernt die Unterstreichung in allen Zuständen */
}

.full-page-link {
    text-decoration: none; /* Entfernt die Unterstreichung des Links */
    color: inherit; /* Verwendet die Standard-Textfarbe */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Stapelt das Logo und den Text vertikal */
    
}

.logo {
    margin-top: 10vw;
    max-width: 30%; /* oder eine andere angemessene Größe für das Logo */
    height: auto; /* behält das Seitenverhältnis bei */
    margin-bottom: 20px; /* Abstand zwischen Logo und Text */
}

.text {
    font-size: 20px; /* oder eine andere angemessene Schriftgröße */
    padding-left: 20px;
    padding-right: 20px;
}